<template>
	<div>
		<div style="color: white;font-size: 22px;position: absolute;top: 115px;left: 67px;" @click="$router.push({path: '/'})">
			<van-icon name="arrow-left" />
			<span style="position: absolute;width: 100px;top: -5px;left: 40px;">高新奇</span>
		</div>
		<div align="center">
			<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
				<div class="left" @click="onSwipeRight">
					<van-icon name="arrow-left" />
				</div>
				<div class="right" @click="onSwipeLeft">
					<van-icon name="arrow" />
				</div>
				<div style="position: absolute;top: 165px;left: 180px;right: 180px;">
					<van-row gutter="40" v-if="test == 1" class="a-fadeinL">
						<van-col span="8" v-for="(item,index) in list" :key="item.id">
							<img :src="item.certificateHonorUrl" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px; width:267px;height:173px;" @click="getImg(index)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">{{item.certificateHonorDescribe}}</span>
						</van-col>
						<!-- <van-col span="8">
							<img src="../assets/e2.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(1)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/e3.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(2)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/e4.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(3)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/e5.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(4)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/e6.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(5)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col> -->
					</van-row>
					<!-- <van-row gutter="40" v-if="test == 0" class="a-fadeinR">
						<van-col span="8">
							<img src="../assets/e1.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(0)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/e2.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(1)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col>
						<van-col span="8">
							<img src="../assets/e3.png" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" @click="getImg(2)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
						</van-col>
					</van-row> -->
				</div>
			</v-touch>
		</div>
	</div>
</template>

<script>
	import { ImagePreview } from 'vant';
	let _this;
	export default {
		name: 'OtherInf2',
		data() {
			return {
                test: 1,
                list:[],
                images:[],
                current:1, // 页数
                size:6,
                page:''
			}
		},
		beforeCreate() { // 创建 vue 实例之前
			_this = this;
		},
		watch: {

		},
		mounted() {

		},
		methods: {
			onSwipeLeft() { // 左滑
               
                if(this.current < this.page){
                     this.current ++;
                this.getHonor()
                }
                
			},
            onSwipeRight() { // 右滑
                if(this.current  > 1){
                     this.current--;
                this.getHonor()
                }
               
			},
			getImg(index) {
				ImagePreview({
					// images: [
					// 	require("../assets/e1.png"),
					// 	require("../assets/e2.png"),
					// 	require("../assets/e3.png"),
					// 	require("../assets/e4.png"),
					// 	require("../assets/e5.png"),
					// 	require("../assets/e6.png")
                    // ],
                    images:this.images,
					startPosition: index
				});
            },
            async  getHonor(){
                // let params = this.qs.stringify({
                //     current:this.current,
                //     size: this.size
                // })
            //  console.log(params);
              var res = await this.$http.get('/gxq/certificateHonor',{
				  params:{
                    current:this.current,
                    size: this.size
                }
			  })
              console.log(res);
              let {code,data,msg} = res.data
              if (code == 200) {
                  this.list = data.records;
                  this.images  = data.records.map(item=>{
					return item.certificateHonorUrl
                })
                this.page = data.pages
                console.log(this.page);
              }
            }
        },
        mounted() {
            this.getHonor()
        },
	}
</script>

<style lang="less" scoped>
	/deep/ .van-icon {
		font: 24px/1 "vant-icon";
	}
	
	/deep/ .van-row {
		margin-right: 0!important;
	}
	
	.left /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(56, 107, 146);
	}
	
	.left {
		position: absolute;
		top: 230px;
		left: 100px;
	}
	
	.right /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(53, 86, 114);
	}
	
	.right {
		position: absolute;
		top: 450px;
		left: 100px;
	}
</style>